<script setup>
import {
  indexaction as indexactionApi,
  helperaction as helperactionApi,
  clearhistoryAction as clearhistoryActionApi,
  addhistoryaction as addhistoryactionApi,
} from "@/api/search";
import { onBeforeMount, ref, reactive } from "vue";
import SearchView from "@/components/SearchView.vue";
import CellView from "@/components/CellView.vue";
import { useRouter } from "vue-router";
import * as _ from "lodash-es";
import { getImageUrl } from "@/utils";

const router = useRouter();
const currentStatus = ref("default"); // default,list,goodsList
const state = reactive({
  indexactionData: {},
  searchList: [],
});

const getIndexactionData = async () => {
  const res = await indexactionApi({
    openId: localStorage.getItem("openId"),
  });
  state.indexactionData = res;
};
onBeforeMount(async () => {
  getIndexactionData();
});

const handleCancle = () => {
  router.push("/home");
};
// 什么节流
const handleSearchGoods = async (keywords) => {
  console.log("keywords=>", keywords);
  const res = await helperactionApi({
    keyword: keywords,
    order: "asc",
  });
  // 修改状态
  currentStatus.value = "list";
  state.searchList = res.keywords;
};
// 节流函数
const throttleSearchGoods = _.throttle(handleSearchGoods, 500);

// 删除历史记录
const handleDeleteHistory = async () => {
  const res = await clearhistoryActionApi({
    openId: localStorage.getItem("openId"),
  });
  // 更新数据
  getIndexactionData();
};

// 搜所列表点击事件
const handleItemClick = async (keyword) => {
  // 1. 状态改变
  currentStatus.value = "goodsList";
  // 2. 添加搜索记录
  const res = await addhistoryactionApi({
    keyword,
    openId: localStorage.getItem("openId"),
  });
};
</script>

<template>
  <div class="search-page">
    <div class="search-container">
      <SearchView
        myshape="round"
        placeholder="搜索商品"
        :show-action="true"
        @cancelevent="handleCancle"
        @valuechange="throttleSearchGoods"
      ></SearchView>
    </div>

    <div v-if="currentStatus === 'default'">
      <!-- 搜索历史记录 -->
      <div
        v-if="
          state.indexactionData.historyData &&
          state.indexactionData.historyData.length > 0
        "
        class="history-container"
      >
        <div class="history-top">
          <h3 class="history-title">历史记录</h3>
          <van-image
            class="search-icon"
            :src="getImageUrl('images/delete-search-icon.png')"
            @click="handleDeleteHistory"
          />
        </div>
        <div class="history-list">
          <div
            class="history-item"
            v-for="item in state.indexactionData.historyData"
            :key="item.id"
          >
            {{ item.keyword }}
          </div>
        </div>
      </div>
      <!-- 热门搜索 -->
      <div
        v-if="
          state.indexactionData.hotKeywordList &&
          state.indexactionData.hotKeywordList.length > 0
        "
        class="hot-search history-container"
      >
        <div class="history-top">
          <h3 class="history-title">热门搜索</h3>
        </div>
        <div class="history-list">
          <div
            class="history-item"
            v-for="item in state.indexactionData.hotKeywordList"
            :key="item.id"
            :class="{ active: item.is_hot === 1 }"
          >
            {{ item.keyword }}
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="currentStatus === 'list'">
      <!-- 搜索结果列表 -->
      <div class="search-list">
        <div
          class="item"
          @click="handleItemClick(item.name)"
          v-for="item in state.searchList"
          :key="item.id"
        >
          <CellView
            :title="item.name"
            :is-link="true"
            :right-img-url="getImageUrl('images/forward-search-icon.png')"
          ></CellView>
        </div>
      </div>
    </div>
    <div v-else>goodsList</div>
  </div>
</template>

<style lang="scss" scoped>
.search-page {
  .search-container {
    background-color: #fff;
    padding: 8px 20px 41px;
  }
  // 历史记录和热门搜索
  .history-container {
    margin-top: 1px;
    background-color: #fff;
    padding: 42px 40px 47px;
    .history-top {
      display: flex;
      justify-content: space-between;
      .history-title {
        font-family: PingFangSC-Medium;
        font-size: 26px;
        font-weight: 500;
      }
      .search-icon {
        width: 20px;
        height: 20px;
      }
    }
    .history-list {
      margin-top: 28px;
      display: flex;
      flex-wrap: wrap;
      .history-item {
        margin-right: 10px;
        margin-bottom: 12px;
        padding: 11px 23px;
        border: 1px solid rgba(226, 226, 226, 1);
        font-family: PingFangSC-Regular;
        font-size: 20px;
        color: #666666;
      }
      .active {
        color: #9f0606;
      }
    }
  }
  .hot-search {
    margin-top: 20px;
  }

  // 搜索列表
  .search-list {
    .item {
      margin-top: 2px;
    }
  }
}
</style>
